import { Overlay } from "ol";
import { mapManager } from "./MapManager";
/**
 * 地图上的提示控件
 */

class Tooltip{

    helpTooltipElement = null;
    helpTooltip = null;
    msg = '通过单击完成规划!';

    constructor(){
        this.createTooltip(); //创建地图上的提示控件
    }

    /**
     * 创建tooltip
     */
    createTooltip(){
        if (this.helpTooltipElement != null) {
            this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
        }
        this.helpTooltipElement = document.createElement('div');
        this.helpTooltipElement.className = 'drawtooltip hidden';
        this.helpTooltip = new Overlay({
            element: this.helpTooltipElement,
            offset: [15, 0],
            positioning: 'center-left'
        });
        mapManager.on('pointermove', (evt)=>{
            if (evt.dragging) {
                return;
            } 
            this.helpTooltipElement.innerHTML = this.msg; 
            this.helpTooltip.setPosition(evt.coordinate); 
        });
        mapManager.current.omap.getViewport().addEventListener('mouseout', ()=>{
            this.helpTooltipElement.classList.add('hidden');
        });
        

    } 

    show(){ 
        console.log('show tooltip')
        mapManager.addOverlay(this.helpTooltip);
        this.helpTooltipElement.classList.remove('hidden');
    }

    hide(){
        this.helpTooltipElement.classList.add('hidden'); 
        mapManager.current.omap.removeOverlay(this.helpTooltip); 
    }
}
var tooltip = null;
function showTip(){
    if(tooltip == null){
        tooltip = new Tooltip();
    }

    tooltip.show();
}

function hideTip(){
    tooltip.hide();
}

export {showTip,hideTip}